<template>
  <div class="Booklist">
    <van-nav-bar title="书单详情" left-arrow @click-left="onClickLeft" class="barcolor" />
    <div class="bltops">
      <bookshow class="bookshows" v-for="(item,pic) in getbook" :key="pic+1" :item="item" />

      <div>
        <div class="advant"></div>
        <div>
          <van-grid :column-num="4">
            <van-grid-item icon="good-job-o" text="推荐" @click="Dialog" />
            <van-grid-item
              icon="like-o"
              text="收藏"
              :style="{color:activecolor}"
              @click="Collection"
            />
            <van-grid-item icon="warning-o" text="举报" @click="report"/>
            <van-grid-item icon="comment-circle-o" text="评论"  @click="comment"/>
          </van-grid>
        </div>
      </div>
      <div class="deintroduction">
        <!-- <span class="deintop">简介 ：{{getbook.chapter}}</span> -->
        <div class="deinma">
          <!-- {{bookbox.main}} -->
        </div>
      </div>
      <div class="deevaluate">
        <div>
          <span class="catalog">书友评价</span>
          <van-icon class="bi" name="edit" />
        </div>
        <div class="evaluatebo">
          <span>
            <van-icon name="description" />
          </span>
        </div>
      </div>
       <div class="tocomment" v-for='(item,name) in comments' :key='name'>
        <div class="left">
            <span class="pic">
            </span>
        </div>
        <div class="bottom">
            <p class="user">
               {{item.name}}
            </p>
            <p class="usercomment">
                {{item.comment}}
            </p>
        </div>
    </div>
      <div class="more" @click="tocomment">更多评论</div>
      <div class="blboot">
        <span class="deintops">好书奉送</span>
        <div class="deinma">
          <!-- {{bookbox.main}} -->
        </div>
      </div>
      <!-- <van-dialog v-model="show" title="标题" show-cancel-button>
        <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-dialog> -->
    </div>
    <bookshow class="bookshows" v-for="(item,index) in booklist" :key="index" :item="item" />
    <nomore />
    <foot />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import foot from "@/components/foot.vue";
import Header from "@/components/Header.vue";
import bookshow from "@/components/bookshow.vue";
import debookshow from "@/components/debookshow.vue";
import nomore from "@/components/nomore.vue";

export default {
  name: "Home",
  components: {
    foot,
    Header,
    bookshow,
    debookshow,
    nomore,
  },
  data() {
    return {
      getbook: [],
      lists: {},
      booklist: [],
      user: [],
      activecolor: "",
      bookdan:[],
     comments:[],
     coms:[],
    };
  },
  methods: {
    changeStyle(index) {
      this.active = index; //实现第一种效果只需要这句代码  实现第二种效果就要加上外面的判断条件
    },
    onClickLeft() {
      this.$router.push("/Home");
    },
    // 推荐
    Dialog() {
      this.user = localStorage.getItem("key");
      console.log(this.user);
      if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录！",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        this.$dialog
          .confirm({
            message: "推荐成功，谢谢您，对本书单的推荐！",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      }
    },
    // 收藏
    Collection() {
      this.user = localStorage.getItem("key");
      console.log(this.user);
      if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录后再收藏",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {

        this.activecolor='red';
        this.$dialog
          .confirm({
            message: "收藏成功，谢谢您，对本书单的推荐！",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });

          // 
        var book = JSON.parse(localStorage.getItem("bookx")) || [];
        console.log(book)
        if (book.length == 0) {
          book.push(this.lists);
          localStorage.setItem("bookx", JSON.stringify(book));
        } else {
          book.push(this.lists);

          // function unique(arr) {
          //   return Array.from(new Set(arr));
          // }
          function getUnique2(arr) {
            const map = {};
            // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉）
            arr.forEach(
              (item) =>
                (map[
                  JSON.stringify(item, [
                    "ather",
                    "category",
                    "chapter",
                    "main",
                    "pic",
                    "score",
                    "state",
                    "title",
                    "zj",
                  ])
                ] = item)
            );

            // 2、再把新对象的键名抽成一个数组返回即为不重复的集合
            return Object.keys(map).map((key) => JSON.parse(key));
          }
          book = getUnique2(book);
          localStorage.setItem("bookx", JSON.stringify(book));
      }
      }
    },
    comment(){
        if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录后再评论",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
           this.$router.push("/comment");
      }
    },
    report(){
      this.$router.push('/report')
    },
    tocomment(){
       this.$router.push('/comment')
    }
  },
  mounted() {
    var list = localStorage.getItem("bookbox");
    // 评论
    
    this.getbook.push(JSON.parse(list));
    this.lists = JSON.parse(localStorage.getItem("bookbox"));
    console.log(JSON.parse(this.getbook[0].coments));
    this.coms = JSON.parse(this.getbook[0].coments)
    // this.comments = JSON.stringify(this.coms.coments[0]) 
    // console.log(this.coms)
    this.coms = JSON.parse(this.getbook[0].coments).coments[0]
    this.comments.push(this.coms)
    console.log(this.comments)
    // console.log(this.comments[0].coments)
    console.log(this.getbook.chapter);
    console.log(this.getbook)
  },
};
</script>

<style  scoped>
.bltops {
  position: relative;
}
.advant {
  height: 1.5rem;
  width: 100%;
}
.deevaluate {
  height: 3.1rem;
  padding: 0.3rem;
}
.evaluatebo {
  margin-top: 0.3rem;
  font-size: 0.4rem;
}

.more {
  height: 1rem;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1rem;
  color: rgb(12, 27, 241);
  border-bottom: 0.2rem solid rgb(248, 234, 234);
}
.deintroduction {
  margin: 0.3rem;
  /* height: 2.1rem; */
  overflow: hidden;
}
.deintop {
  font-size: 0.4rem;
  font-weight: 700;
}
.deinma {
  color: rgb(102, 94, 94);
  font-size: 0.2rem;
}
/* icon */
.dedo {
  width: 100%;
  text-align: center;
  height: 0.3rem;
  /* background-color: rgb(207, 176, 176); */
  /* border-bottom: 0.2rem solid rgb(248, 234, 234); */
}
/* 目录 */
.decatalog {
  padding: 0.3rem;
  height: 1rem;
  border-bottom: 0.2rem solid rgb(248, 234, 234);
}
.catalog {
  font-size: 0.6rem;
  font-weight: 600;
}
.chapter {
  margin-top: -0.6rem;
  text-align: center;
  font-size: 0.4rem;
  color: rgb(102, 94, 94);
}
.updata {
  font-size: 0.5rem;
}
.advertisement {
  height: 2rem;
  border-bottom: 0.2rem solid rgb(248, 234, 234);
  background-color: #fff;
}
.advertisement img {
  width: 100%;
  height: 2rem;
}
.advertisement span {
  position: relative;
  top: -2rem;
  left: 0.1rem;
  z-index: 2;
}
.bi {
  position: absolute;
  right: 0.3rem;
  margin-top: 0.3rem;
}
.blboot {
  padding: 0.3rem;
  border-bottom: 0.001rem solid rgb(100, 99, 99);
}
.deintops {
  font-size: 0.4rem;
  font-weight: 700;
  display: block;
  height: 0.6rem;
  line-height: 0.6rem;
}
.barcolor {
  background-color: rgb(96, 207, 235);
}
/*  */
.top,.tocomment{
  height: 2rem;
  padding:0rem 1rem;
  margin: 0rem 0.2rem;
  text-align: center;
  background-color: #f8f8f8;
}

/* 最新 */
.setop {
  width: 100%;
  height: 1rem;
  line-height: 0.8rem;
  overflow: hidden;
}

.hwtopl {
  float: left;
  height: 0.5rem;
  width: 0.1rem;
  background-color: #60cfeb;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
}

.hwtop1 {
  font-size: 0.5rem;
  font-weight: 600;
  float: left;
  margin-left: 0.3rem;
}

.hwtop2 {
  font-size: 0.1rem;
  float: right;
  margin-right: 0.3rem;
}
.hwtext {
  position: relative;
  top: 2rem;
}

.hotmtop {
  width: 100%;
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
}

/* 评论*/
.tocomment{
    background-color: #fff;
    border-bottom: none;
    margin-top: -2rem;
}
.tocomment .bottom{
   float: left;
   height: 1.5rem;
   width: 6.3rem;
    text-align: left;
    border-bottom: 1px solid rgba(175, 172, 172, 0.616);
}
.tocomment .left{
    height:1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: rgb(139, 211, 45);
    float: left;
    margin-right: .3rem;
    margin-top: .1rem;
}
.tops{
    padding-top:.2rem ;
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-bestween;
}
.user{
    margin-top: .1rem;
    font-size: .4rem;
    color: rgb(74, 102, 231);
}
.usercomment{
    margin-top:.2rem;
    font-size:.4rem;
}
.last{
    text-align: center;
    margin-top: 2rem;
    color: rgb(17, 0, 255);
    font-size: .4rem;
}
.bi{
    font-size: .4rem;
    transform: translate(0px,2px);
}
</style>